<template>
  <div style="height: 100%">
    <van-search v-model="value" placeholder="请输入搜索关键词" />

    <van-tree-select
      height="92vh"
      :items="items"
      :main-active-index.sync="active"
      @click-nav="onClickNav"
    >
      <template #content>
        <van-image style="height:1.92rem;" :src="bannerUrl" />
        <div v-for="item in details" :key="item.id">
          <div class="m-subCateContainer">{{ item.name }}</div>
          <van-grid :column-num="3" :icon-size="50">
            <van-grid-item
              v-for="categoryListItem in item.categoryList"
              :key="categoryListItem.id"
              :icon="categoryListItem.wapBannerUrl"
              :text="categoryListItem.name"
            />
          </van-grid>
        </div>
      </template>
    </van-tree-select>
  </div>
</template>

<script>
import api from "@/api";

export default {
  name: "category",
  data() {
    return {
      value: "",
      active: 0,
      items: [],
      details: [],
      bannerUrl: "",
    };
  },
  async created() {
    const res = await api.cateList();
    this.items = res.data.categoryL1List.map((item) => {
      return { ...item, text: item.name };
    });
    console.log(this.items);

    this.onClickNav("0");
  },
  methods: {
    // onClickItem(item) {
    //   debugger;
    // },
    async onClickNav(index) {
      let categoryId = this.items[index].id;
      const res = await api.cateList(categoryId);
      this.details = res.data.categoryGroupList;
      this.bannerUrl =
        res.data.currentCategory.bannerUrl ||
        "https://yanxuan.nosdn.127.net/3066e60cfdd901ee76d0849bbd93dbf8.jpg?quality=75&type=webp&imageView&thumbnail=0x196";
    },
  },
};
</script>

<style lang="less" scoped>
.m-subCateContainer {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding-bottom: 0.08rem;
  margin-bottom: 0.24rem;
  text-align: left;
  font-size: 0.28rem;
  font-weight: 700;
  color: #333;
  border-bottom: 1px solid #d9d9d9;
}
</style>
